<script setup lang="ts">
import { computed, ref } from 'vue'
import { NInput, NSpace, NButton, NFormItem, NRadioGroup, NRadio, useMessage } from 'naive-ui'
import { login } from '@/api/user'
import type { LoginPayloadType, LoginType, UserInfoType } from '@/types/api/user'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/stores/userInfo'
import { ACCESS_TOKEN_KEY } from '@/constants/index'

const router = useRouter()
const message = useMessage()
const userInfoStore = useUserInfoStore()

// 登录类型列表
const loginTypeList = ref<
  {
    label: string
    key: LoginType
  }[]
>([
  {
    label: '用户名',
    key: 'username'
  },
  {
    label: '邮箱',
    key: 'email'
  },
  {
    label: '手机号',
    key: 'phoneNumber'
  }
])

// 登录类型
const LoginType = ref<LoginType>('username')
// 登录类型文字展示
const loginTypeText = computed(
  () => loginTypeList.value.find((item) => item.key === LoginType.value)?.label || ''
)

// 账号
const account = ref('')
// 密码
const password = ref('')
// 是否正在登录
const loading = ref(false)

// 登录
const handleLogin = async () => {
  if (!account.value) {
    return message.error(`请输入${loginTypeText.value}`)
  }
  if (!password.value) {
    return message.error(`请输入密码`)
  }
  const payload: LoginPayloadType = {
    phoneNumber: '',
    [LoginType.value]: account.value,
    password: password.value
  }
  loading.value = true
  try {
    const result = await login(payload)
    const content = result.content
    // 保存token到localStorage中
    localStorage.setItem(ACCESS_TOKEN_KEY, content.token)
    // 保存信息到pinia
    const userInfo: UserInfoType = {
      id: content.id,
      username: content.username,
      email: content.email,
      phoneNumber: content.phoneNumber
    }
    userInfoStore.setUserInfo(userInfo)

    // 动态增加路由

    router.push('/')
  } catch (error: any) {
    console.error(error.message)
  }
  loading.value = false
}
</script>

<template>
  <div class="container">
    <div class="form-wrapper">
      <NSpace :vertical="true">
        <n-radio-group v-model:value="LoginType">
          <n-space>
            <n-radio
              v-for="type of loginTypeList"
              :key="type.key"
              :label="type.label"
              :value="type.key"
            />
          </n-space>
        </n-radio-group>
        <NInput
          type="text"
          v-model:value="account"
          :placeholder="'请输入' + loginTypeText"
          :clearable="true"
          style="width: 100%"
          :autofocus="true"
        />
        <NFormItem label="密码:">
          <NInput
            type="password"
            v-model:value="password"
            placeholder="请输入密码"
            :clearable="true"
          />
        </NFormItem>
        <NSpace justify="center">
          <NButton type="primary" :loading="loading" @click="handleLogin">登录</NButton>
        </NSpace>
      </NSpace>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  height: 100vh;
  position: relative;

  .form-wrapper {
    width: 400px;
    border: 1px solid #ddf;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 24px;
    user-select: none;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
